<script setup>
import useLocalStore from "@/stores/local";
import useUserStore from "@/stores/user";
import { useRoute, useRouter } from "vue-router";

const userStore = useUserStore();
const localStore = useLocalStore();
const route = useRoute();
const router = useRouter();
const isMobile = computed(() => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
});
const active = ref(0);
const visible = ref(false);

const next = () => {
  if (active.value++ > 2) active.value = 0;
};
// 公共页脚，备案信息等
function contant(e) {
  e.preventDefault();
}
function goWeixin() {
  // https://work.weixin.qq.com/kfid/kfc4d5c47ec0d5a0db2
  window.open("https://work.weixin.qq.com/kfid/kfc4d5c47ec0d5a0db2", "_blank");
}

function showAction() {
  visible.value = true;
}
function goHelp() {
  router.push("/help");
}
</script>
<template>
  <div class="footer" :class="{ isMobile: isMobile }" v-wave>
    <div class="footer-content-container">
      <div v-if="route.path == '/'" class="some-about-us">
        <div class="about-us-one">
          <!--              <span class="about-us-title">关于我们</span>-->
          <span class="about-us-text">关于我们</span>
        </div>
        <div class="about-us-one">
          <!--            <span class="about-us-title">关于我们</span>-->
          <span class="about-us-text">合作联系</span>
        </div>
        <div class="about-us-one">
          <span class="about-us-text">网站声明</span>
        </div>
        <div class="about-us-one">
          <span class="about-us-text" @click="goHelp">帮助中心</span>
          <!--              跳转微信客服-->
          <span class="about-us-text" @click="goWeixin">客服中心</span>
          <span class="about-us-text" @click="showAction" style="color: blue"
            >操作指南</span
          >
        </div>
      </div>
      <div class="footer-content" :class="{ isMobile: isMobile }" id="tests">
        <div class="footer-part2">
          <p>
            <!-- http://www.beian.gov.cn/portal/registerSystemInfo -->

            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              style="color: blue"
            >
              <img
                src="//www.hqwx.com/images/beian_icon.png"
                style="width: 17px; height: 17px; margin-right: 3px"
              />
              渝ICP备2025048867号-1</a
            ><em>|</em> 邮编：401336<em> | </em>版权所有：
            重庆（中震）网络有限公司 <em> | </em>证书号：软著登字第14469047号
            <!-- <a href="javascript:;return false;"
                  @click="contant">联系客服</a> -->
            <br />
          </p>
          <div></div>
        </div>
      </div>
    </div>

    <el-dialog v-model="visible" title="操作指引" width="60%">
      <div>
        <el-steps
          style="max-width: 600px"
          :active="active"
          finish-status="success"
          direction="vertical"
        >
          <el-step title="Step 1">
            <template #description>
              <div>
                <span> 登录，点击顶部导航栏头像，进入我的学习页面 </span>
                <img style="width: 100%;" src="/action1.png" alt="" />
              </div>
            </template>
          </el-step>
          <el-step title="Step 2">
            <template #description>
              <div>
                <span> 点击切换考试科目 </span>
                <img style="width: 100%;" src="/action2.png" alt="" />
              </div>
            </template>
          </el-step>
          <el-step title="Step 3" >
            <template #description>
              <div>
                <span> 进入题库或课程进行观看练习 </span>
                
              </div>
            </template>
          </el-step>
        </el-steps>
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style   scoped>
.footer {
  border-top: 1px solid #efeff0;
  color: #171920;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  cursor: default;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  background: #ffffff;
  width: 100%;
  min-width: 1180px;
  font-size: 0px;
}

@media screen and (min-width: 1400px) {
  .footer-content-container {
  width: 1400px;
  }
}
.footer-content-container {
  margin: 0 auto;
  padding: 32px;
}
.footer .footer-content {
  color: #171920;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  cursor: default;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  font-size: 0px;

  margin: 0 auto;
  padding: 0 10px;
  position: relative;

  text-align: left;
}
.footer-part2 {
  color: #171920;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  cursor: default;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  font-size: 0px;
  padding-bottom: 25px;
  position: relative;
}
.footer-part2 > p {
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  cursor: default;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  margin: 0;
  padding: 0;
  padding-top: 28px;
  font-size: 12px;
  color: #9598a2;
  line-height: 18px;
}
.footer-part2 > div {
  color: #171920;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  cursor: default;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  font-size: 0px;
  position: absolute;
  right: 0px;
  top: 33px;
}
.footer-part2 > p a {
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
  font-family: "microsoft yahei";
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  outline: 0 none;
  text-decoration: none;
  color: #9598a2;
}
.footer-part2 > p em {
  font-style: normal;
}

.footer .footer-content.isMobile#tests {
  width: 100% !important;
}
.footer.isMobile {
  min-width: unset;
}
.some-about-us {
  display: flex;
}
.about-us-one {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-us-title {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}
.about-us-text {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
</style>